import React, { PureComponent } from 'react';
// 引入样式
import './history.scss';
// 发送axios
import Axios from 'axios';
// 引入接口
import { webSite } from '../../website'
// 引入框架
import { message } from 'antd';
export default class History extends PureComponent {
  constructor() {
    super()
    // 存储拿到的数据
    this.history = []
  }
  componentDidMount () {
    // 存一下this
    const _this = this;
    // 网页加载时请求数据
    Axios.create({
      baseURL: `${webSite}:3003`
    }).get("/lifeHistory").then(err => {
      if (err.data.code === 'F0001') {
        // 拿到数据赋值给页面
        _this.history = [].concat(err.data.data.result);
        // 强制页面刷新
        this.forceUpdate();
      } else if (err.data.code === 'F0002') {
        // 当请求不到数据时提示用户
        message.error({ content: '今日请求已达上限', className: 'bulletChatMessage' });
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }
  getDate = () => {
    let date = new Date();
    let month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    let ri = date.getDate(); //获取当前日(1-31)
    return month + '月' + ri + '日';
  }
  render () {
    return (
      <div className='history'>
        <h2>历史上的今天</h2>
        <b>历史上的{this.getDate()}</b>
        <span>点击可跳转至百度查看详情~</span>
        {/* 展示 */}
        {
          this.history.map((data, index) => {
            // 存储一个a标签的跳转地址
            let title = `https://www.baidu.com/s?ie=UTF-8&wd=${data.title}`;
            return (
              <a href={title} key={index}>
                <div className='history_li'>
                  <img src={data.pic ? data.pic : 'http://img2.imgtn.bdimg.com/it/u=2079985991,2066473431&fm=26&gp=0.jpg'} alt="人物图片" />
                  <div className='history_div'>
                    <h2>{data.title}</h2>
                    <p>{data.des}</p>
                  </div>
                </div>
              </a>
            )
          })
        }
      </div>
    )
  }
}
